<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	*{margin:0px;padding:0px;}
	#demo{width:200px;height:210px;background:lightgreen;position:absolute;left:0px;top:0px;}
	#dv{width:300px;height:300px;background:lightblue;position:absolute;left:150px;top:30px;}
	</style>
</head>
<body style='width:2000px;height:2000px'>
	<!-- <div id='dv'> -->
		<div id='demo'></div>
	<!-- </div> -->
	<script type="text/javascript" src='jquery-1.8.3.min.js'></script>

	<script type="text/javascript">
	//相对于文档的偏移量
	var off = $('#demo').offset();
	//相对于父级的偏移量
	var par = $('#demo').position();
	//设置滚动条距离左和顶部的偏移量
	$(window).scrollLeft();
	$(window).scrollTop(200);
	
	//获取文档的额宽度
	var w = $(document).width();
	var h = $(document).height();

	//可视区域的宽度和高度
	var ww = $(window).width();
	var wh = $(window).height();

	//获取元素本身的宽和高
	var sw = $('#demo').width();
	var sh = $('#demo').height();

	console.log(sw);
	console.log(sh);
	</script>
</body>
</html>